<template>
    <div class="container comFlex comFlexCenter">
        <div class="loginBg">
            <div class="comFlex comFlexCenter comColumn comTop77" style="width: 100%;">
                <span class="color248BFC font44 fontClass">AI 养老数智健康平台</span>
                <el-input style="width: 400px;" class="top49" placeholder="请输入账号" v-model="name">
                    <template #prefix>
                        <img src="@/assets/login/userIcon.png" class="w34h34"/>
                    </template>
                </el-input>
                <el-input placeholder="请输入登录密码" type="password" style="width: 400px;" class="comTop20" v-model="pass">
                    <template #prefix>
                        <img src="@/assets/login/pass.png" class="w34h34"/>
                    </template>
                </el-input>
                <div class="comFlex comFlexCenter comTop20" style="justify-content: flex-start;width: 70%;">
                    <el-input
                        @keyup.enter="toHome"
                        style="width:300px"
                        v-model="captcha"
                        placeholder="请输入验证码"
                    ></el-input>
                    <div class="captcha-image comPointer comLeft5"  @click="refreshCaptcha" style="margin-top: -5px;">
                         <img style="width: 100px; height: 40px" :src="captchaImage"/>
                    </div>
                </div>
                <div class="comWidth400 comFlex flexJustEnd comFlexCenter comTop20">
                    <!-- <el-checkbox v-model="remenberPwd" label="记住密码" size="large" @change="isRember">
                        
                    </el-checkbox> -->
                    <span class="comFont14 comPointer">忘记密码</span>
                </div>
                <el-button @click="toHome" class="comTop20">登陆</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import axios from "axios";
import {encrypt} from '@/tools/tools.js'
import { UserService } from '@/api/api'
import { Calendar, User ,Lock} from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
const name = ref('')
const pass = ref('')
import { useRouter } from 'vue-router';
import { ElMessage } from "element-plus";
const router = useRouter()
const plaintext = ref('');
const captchaImage = ref('')
const key = ref('thanks,acc4cloud'); // 16字节密钥
const iv = ref('thanks,acc4cloud');  // 16字节初始化向量
const randomNum = ref('')
const remenberPwd = ref(false)
const isRember = (val) => {
    if(pass.value == ''){
        ElMessage.warning('请输入密码')
    }else{
        
    }
}
const captcha = ref('')
const refreshCaptcha = () => {
    randomNum.value = Math.floor(Math.random() * 10000000000);
    axios.get(import.meta.env.VITE_BASE_API + 'auth/code/image?randomStr=' + randomNum.value,{
        responseType: 'blob'
    }).then(res => {
        captchaImage.value = window.URL.createObjectURL(res.data) 
    })
}
const toHome = () => {
    const passwd = encrypt(key.value,iv.value,pass.value, plaintext.value)
    let randomStr = {
        username : name.value,
        password : passwd,
        scope : 'server',
        grant_type : 'password',
        code : captcha.value,
        randomStr : `${randomNum.value}`
    }
    localStorage.removeItem('token')
    UserService.login({...randomStr}).then(res => {
        if(res.access_token != ''){
            ElMessage.success('登陆成功!')
            localStorage.setItem('token', res.access_token)
            localStorage.setItem('refresh_token', res.refresh_token)
            router.push('/dashboard')
        } else{
            refreshCaptcha()
        }
    })
}
onMounted(() => {
    refreshCaptcha()
})
</script>
<style scoped>
.container{
    width: 100%;
    height: 100%;
    /* background: #4C49F8; */
    background-image: url('@/assets/loginBg.png');
    background-size: 100% 100%;
}
.loginBg{
    margin-left: 200px;
    width: 564px;
    height: 610px;
    line-height: 20px;
    border-radius: 40px;
    background-color: rgba(255,255,255,1);
    color: rgba(16,16,16,1);
    font-size: 14px;
    text-align: center;
    font-family: -regular;
    border: 1px solid rgba(187,187,187,1);
}
:deep(.el-button){
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 75px;
    width: 390px;
    height: 58px;
    background: linear-gradient(266deg, #2B92FB 0%, #0066FF 100%);
    border-radius: 29px;
}
:deep(.el-main) {
    --el-main-padding: 0;
}
 :deep(.el-input__wrapper), :deep(.el-input__wrapper.is-focus){
    width: 392px;
    height: 60px;
    background: #D2E1FF;
    border-radius: 29px;
    border: 1px solid #FFFFFF;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 20px;
    color: #8BA8C0;
 }
 :deep(input:-internal-autofill-selected){
    background-color: transparent !important;
 }
 :deep(.el-input__wrapper:hover){
    box-shadow: 0 0 0 0 transparent inset;
    border-bottom: 1px solid lightblue;
 }
 .captcha-image{
    width: 30px;
    height: 30px;
 }
</style>